<template>
  <view>
    <u-navbar title="修改密码" fixed placeholder @leftClick="goBack()"></u-navbar>
    <view class="content">
      <view class="form">
        <u-form>
          <u-form-item label="账号">
            <u-input :disabled="disabled" v-model="account" disabled-color="#ffffff" placeholder="请输入"></u-input>
          </u-form-item>
          <u-form-item label="密码">
            <u-input v-model="password" placeholder="请输入密码" :password="visible">
              <template slot="suffix">
                <view @click="visible = !visible">
                  <u-icon v-if="visible" name="eye-fill"></u-icon>
                  <u-icon v-else name="eye-off"></u-icon>
                </view>
              </template>
            </u-input>
          </u-form-item>
          <u-form-item>
            <view class="button" @click="handleSubmit()">修改</view>
          </u-form-item>
        </u-form>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  updatePassword
} from '@/api/user'
export default {
  data() {
    return {
      account: '',
      password: '',
      visible: true
    }
  },
  computed: {
    ...mapGetters(['username']),
    disabled() {
      return (this.username ?? '') != ''
    }
  },
  created() {
    this.account = this.username || ''
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    handleSubmit() {
      if((this.password ?? '') == '') {
        this.$toast.show({
          msg: '请输入新密码'
        })
        return
      }
      const params = {}
      params.account = this.account
      params.password = this.password
      updatePassword(params).then(res => {
        this.$toast.show({
          msg: res.msg
        })
        if(res.code === 200) {
          this.$store.commit('SET_PASSWORD', this.password)
          setTimeout(() => {
            uni.navigateBack({ delta: 2 })
          }, 300)
        }
        
      })
    }
  },
} 
</script>

<style scoped lang="scss">
  .form {
    width: auto;
    margin: 20px;
    padding: 20px 10px 10px;
    border-radius: 8px;
    background-color: #ffffff;

    .button {
        width: calc(100% - 40px);
        padding: 5px 10px;
        margin: 10px 20px;
        background-color: $primary-theme-color;
        border-radius: 4px;
        color: #ffffff;
        text-align: center;
    }
  }
</style>